<template>
  <div>
    <el-autocomplete popper-class="my-autocomplete" v-model="state" :fetch-suggestions="querySearch" placeholder="请输入内容"
                     @select="handleSelect">
      <i class="el-icon-edit el-input__icon" slot="suffix" @click="handleIconClick"></i>
      <template slot-scope="{ item }">
        <div class="name">{{ item.empName }}</div>
        <span class="addr">{{ item.empId }}</span>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
export default {
  data() {
    return {
      restaurants: [],
      state: '',
    };
  },
  methods: {
    querySearch(queryString, cb) {
      const restaurants = this.restaurants;
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.empName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    async loadAll() {
      const {data: res} = await this.$http.get('/admin/dept/getEmpList').catch(function (e) {
        if (e.response.status === 500) {
          return this.$message.error("服务器错误")
        } else if (e.response.status === 404) {
          return this.$message.error("页面不存在")
        } else {
          return this.$message.error(e)
        }
      })
      if (res.status !== 200) return this.$message.error("查询失败")
      this.restaurants = res.data
    },
    handleSelect(item) {
      console.log(item);
    },
    handleIconClick(ev) {
      console.log(ev);
    }
  },
  mounted() {
    this.loadAll();
  }
}
</script>

<style scoped lang="less">
.my-autocomplete {

  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }

  }
}
</style>
